.mine {
  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .display-flex {
    display: flex
  }

  .mr-5 {
    margin-right: 10rpx;
  }
  .mr-10 {
    margin-right: 20rpx;
  }

  .mr-auto {
    margin-right: auto !important;
  }
  .display-flex{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  &.page {
    background-color: #f8f8f8;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 28rpx 100rpx 28rpx;
      border: 1rpx solid red;

      // background-image: linear-gradient(171.1deg, #1c2c60 0%, #1d2f65 -14.46%, #adb4c9 46.78%, #ea602d00 100%);
      .banner-wrap {
        margin: 24rpx 24rpx 0 24rpx;
        border-radius: 16rpx;
        overflow: hidden;

        .banner {
          height: 300rpx;
          border-radius: 16rpx;
          overflow: hidden;

          .banner-content {
            width: 100%;
            height: 100%;
            position: relative;
            cursor: pointer;
            transition: transform 0.2s ease;

            &:active {
              transform: scale(0.98);
            }

            .image_10 {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 16rpx;
            }
          }
        }
      }
      .main-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 0 0 16rpx 16rpx;
        display: block;
      }

      .title-section {
        background: #fff;
        border-radius: 0 0 16rpx 16rpx;
        padding: 24rpx 24rpx 0 24rpx;
        margin-bottom: 24rpx;

        .title {
          font-size: 32rpx;
          color: #222;
          font-weight: 600;
          margin-bottom: 12rpx;
        }

        .time-row {
          display: flex;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 4rpx;

          .time-label {
            width: 120rpx;
            color: #999;
            margin: 10rpx 0;
          }

          .time-value {
            color: #333;
            margin: 10rpx 0;
          }
        }

        .action-row {
          display: flex;
          // justify-content: flex-end;
          align-items: center;

          .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            line-height: normal;
            font-size: inherit;
            margin-right: 10rpx;
            &::after {
              border: none;
            }

            .icon-box {
              width: 48rpx;
              height: 48rpx;
              border: 2rpx dashed #999;
              border-radius: 6rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 6rpx;
            }

            .action-icon {
              width: 32rpx;
              height: 32rpx;
              object-fit: contain;
            }

            .action-text {
              font-size: 24rpx;
              color: #222;
              font-weight: 500;
              text-align: center;
            }
          }
        }
      }

      .section-title {
        font-size: 28rpx;
        color: #232f5b;
        font-weight: bold;
        margin: 32rpx 0 16rpx 24rpx;
      }

      .package-card {
        border: 2rpx dashed #d9d9d9;
        border-radius: 12rpx;
        background: #fff;
        margin: 0 24rpx 24rpx 24rpx;
        padding: 24rpx;

        .package-title {
          font-size: 28rpx;
          color: #222;
          font-weight: 500;
          margin-bottom: 16rpx;
        }

        .package-row {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .package-price {
            color: #e53935;
            font-size: 32rpx;
            font-weight: bold;
          }

          .package-btns {
            display: flex;
            gap: 16rpx;

            .desc-btn {
              background: #fff;
              color: #232f5b;
              border: 2rpx solid #232f5b;
              border-radius: 8rpx;
              font-size: 26rpx;
              // padding: 8rpx 24rpx;
              margin-right: 0;
              width: 162rpx;
              height: 60rpx;
              line-height: 60rpx;
            }

            .order-btn {
              background: #1D428A;
              color: #fff;
              border: none;
              border-radius: 8rpx;
              font-size: 26rpx;
              height: 60rpx;
              line-height: 60rpx;
              // padding: 8rpx 32rpx;
            }
          }
        }
      }

      .desc-card {
        border: 2rpx dashed #d9d9d9;
        border-radius: 12rpx;
        background: #fff;
        margin: 0 24rpx 24rpx 24rpx;
        padding: 24rpx;

        .desc-img {
          width: 100%;
          height: 180px;
          object-fit: cover;
          border-radius: 8rpx;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .desc-images {
          margin-bottom: 20rpx;
          
          .desc-img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 8rpx;
            margin-bottom: 16rpx;
            display: block;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .desc-text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.8;
          padding: 24rpx;
          background: #fff;
          border-radius: 12rpx;
          margin: 24rpx 0;
          
          .content-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60rpx 0;
            color: #999;
            font-size: 28rpx;
          }
          
          // rich-text组件样式
          :deep(.rich-text) {
            word-wrap: break-word;
            word-break: break-all;
            
            // 段落样式
            p {
              margin: 0 0 20rpx 0;
              line-height: 1.6;
              font-size: 28rpx;
              color: #333;
              
              &:last-child {
                margin-bottom: 0;
              }
            }
            
            // span样式，确保内联样式生效
            span {
              display: inline;
              
              // 确保text-align样式生效
              &[style*="text-align: right"] {
                text-align: right !important;
                display: block !important;
                width: 100% !important;
              }
              
              &[style*="text-align: center"] {
                text-align: center !important;
                display: block !important;
                width: 100% !important;
              }
              
              &[style*="text-align: left"] {
                text-align: left !important;
                display: block !important;
                width: 100% !important;
              }
              
              // 确保color样式生效
              &[style*="color: red"] {
                color: red !important;
              }
              
              &[style*="color: blue"] {
                color: blue !important;
              }
            }
            
            // 链接样式
            a {
              color: #007aff;
              text-decoration: none;
            }
            
            // 图片样式优化
            img {
              max-width: 100% !important;
              height: auto !important;
              display: block;
              margin: 20rpx auto;
              border-radius: 8rpx;
              box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
              transition: all 0.3s ease;
              
              &:hover {
                transform: scale(1.02);
                box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
              }
            }
            
            // 粗体样式
            strong, b {
              font-weight: bold;
            }
            
            // 斜体样式
            em, i {
              font-style: italic;
            }
            
            // 下划线样式
            u {
              text-decoration: underline;
            }
            
            // 标题样式
            h1, h2, h3, h4, h5, h6 {
              margin: 24rpx 0 16rpx 0;
              font-weight: 600;
              color: #222;
            }
            
            h1 { font-size: 36rpx; }
            h2 { font-size: 34rpx; }
            h3 { font-size: 32rpx; }
            h4 { font-size: 30rpx; }
            h5 { font-size: 28rpx; }
            h6 { font-size: 26rpx; }
          }
        }
      }



    }

    .movable-area {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 100;
    }

    .fab-container {
      pointer-events: auto;
      width: 100rpx;
      height: 100rpx;
      background-color: transparent;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    }

    .fab-icon {
      width: 100%;
      height: 100%;
    }

    .text-wrapper {
      width: 90%;
      height: 90rpx;
      background-color: #1D428A;
      box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
      border-radius: 22rpx;
      border: unset !important;
      // position: absolute;
      // bottom: 90rpx;
      // left: 50%;
      // transform: translate(-50%, 0);

      &::after {
        border: unset !important;
      }

      .text {
        color: #fff;
        font-size: 30rpx;
        font-family: 'PingFang SC';
        line-height: 90rpx;
      }
    }
    
    // 套餐说明弹窗样式
    .popup-content {
      background: #fff;
      border-radius: 24rpx 24rpx 0 0;
      max-height: 80vh;
      overflow-y: auto;
      
      .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 32rpx 24rpx 32rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        .popup-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #232f5b;
        }
        
        .popup-close {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: #f5f5f5;
          
          .close-icon {
            font-size: 40rpx;
            color: #999;
            line-height: 1;
          }
        }
      }
      
      .popup-body {
        padding: 32rpx;
        padding-bottom: 80rpx;
        .popup-images {
          margin-bottom: 32rpx;
          
          .popup-img {
            width: 100%;
            height: 300rpx;
            object-fit: cover;
            border-radius: 12rpx;
            margin-bottom: 20rpx;
            display: block;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        
        .popup-text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.8;
          
          // rich-text样式
          :deep(.rich-text) {
            word-wrap: break-word;
            word-break: break-all;
            
            p {
              margin: 0 0 20rpx 0;
              line-height: 1.6;
            }
            
            span {
              display: inline;
              
              &[style*="text-align: right"] {
                text-align: right !important;
                display: block !important;
                width: 100% !important;
              }
              
              &[style*="text-align: center"] {
                text-align: center !important;
                display: block !important;
                width: 100% !important;
              }
              
              &[style*="color: red"] {
                color: red !important;
              }
              
              &[style*="color: blue"] {
                color: blue !important;
              }
            }
          }
        }
        
        .debug-info {
          margin-top: 20rpx;
          padding: 20rpx;
          background: #f5f5f5;
          border-radius: 8rpx;
          font-size: 24rpx;
          color: #666;
          
          text {
            display: block;
            margin-bottom: 8rpx;
          }
        }
      }
    }
  }
}